<template>
  <div>
    <draggable
      v-model="items"
      chosenClass="chosen"
      forceFallback="true"
      group="module"
      animation="1000"
      @start="onStart"
      @end="onEnd">
      <transition-group>
        <div class="item" v-for="(t,i) in items" :key="`obj${i}`">{{ t.id }}</div>
      </transition-group>
    </draggable>
    <div v-if="saving" class="tac pd10" style="color:#555;"><a-spin class="mr10" />正在保存序号...</div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      saving: false,
      items: this.list,
      result: []
    }
  },
  methods: {
    onStart () {},
    onEnd () {
      this.saving = true
      setTimeout(() => {
        this.saving = false
        this.result = this.items.map((t, i) => {
          return {
            id: t.id,
            index: i
          }
        })
      }, 200)
    },
    save () {
      if (this.result.length === 0) {
        return this.$result.error('请您对数据进行顺序')
      }
      return this.$result.ok(this.result)
    }
  }
}
</script>
<style lang="less" scoped>
  .item{
    padding:10px;
    border:solid 1px #b8e7f5;
    background:#b8e7f5;
    color:#555;
    margin-bottom:10px;
    border-radius:4px;
    cursor:move;
  }
  .chosen{
    border:solid 1px #096daf;
    background:#096daf;
    color:#fff;
  }
</style>
